import React, { Component } from 'react'
import { TabBar } from 'antd-mobile'
import { MapConsumer } from '../../context/Mapcontext'

import cookbook from 'assets/images/cookbook.png'
import cookbookActive from 'assets/images/cookbook-active.png'

import menu from 'assets/images/menu.png'
import menuActive from 'assets/images/menu-active.png'

import map from 'assets/images/location.png'
import mapActive from 'assets/images/location-active.png'

import more from 'assets/images/more.png'
import moreActive from 'assets/images/more-active.png'

import CookBook from 'view/home/cookbook/CookBook'
import Category from 'view/home/category/Category'
import Map from 'view/home/map/Map'
import More from 'view/home/more/More'
const Tabbarlist = [
    {
        title: '菜谱大全',
        icon: cookbook,
        iconActive: cookbookActive,
        component: CookBook,
        id: "cookbook"
    },
    {
        title: '分类',
        icon: menu,
        iconActive: menuActive,
        component: Category,
        id: "category"
    },
    {
        title: '更多',
        icon: more,
        iconActive: moreActive,
        component: More,
        id: "more"
    }
]
const mapBar = {
    title: '地图',
    icon: map,
    iconActive: mapActive,
    component: Map,
    id: "map"
};
export default class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'cookbook',
        };
    }
    render() {
        return (
            <MapConsumer>
                {
                    ({showMap}) => {
                        if (showMap && Tabbarlist.length === 3) {
                            Tabbarlist.splice(2, 0, mapBar)
                        } else {
                            if (!showMap && Tabbarlist.length === 4) {
                                Tabbarlist.splice(2, 1)
                            }
                        }
                        return (
                            <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
                                <TabBar
                                    unselectedTintColor="#949494"
                                    tintColor="#33A3F4"
                                    barTintColor="white"
                                    hidden={this.state.hidden}
                                >
                                    {
                                        Tabbarlist.map((item) => {
                                            return (
                                                <TabBar.Item
                                                    title={item.title}
                                                    key="{item.id}"
                                                    icon={<div style={{
                                                        width: '22px',
                                                        height: '22px',
                                                        background: `url(${item.icon}) center center /  21px 21px no-repeat`
                                                    }}
                                                    />
                                                    }
                                                    selectedIcon={<div style={{
                                                        width: '22px',
                                                        height: '22px',
                                                        background: `url(${item.iconActive}) center center /  21px 21px no-repeat`
                                                    }}
                                                    />
                                                    }
                                                    selected={this.state.selectedTab === item.id}
                                                    onPress={() => {
                                                        // console.log(this.props);
                                                        this.props.history.push(`/home/${item.id}`)
                                                        this.setState({
                                                            selectedTab: item.id,
                                                        });
                                                    }}
                                                    data-seed="logId"
                                                >
                                                    {
                                                        <item.component></item.component>
                                                    }
                                                </TabBar.Item>
                                            )
                                        })
                                    }



                                </TabBar>
                            </div>
                        );
                    }
                }
            </MapConsumer>)

    }
}
